<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="layui/jquery-3.2.1.min.js"></script>
    <script src="layui/layui.js"></script>
    <link href="layui/css/layui.css" rel="stylesheet">
    <script>
        $(function () {
            layui.use('laypage', function(){
                var laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem: 'cutPageDiv' //注意，这里的 test1 是 ID，不用加 # 号
                    ,count: 50, //数据总数，从服务端得到
                    limit:5,
                    jump:function (obj,first) {
                        if(first != 1){
                            //打印页码
                            console.log(obj.curr)
                        }
                    }
                });
            });

            //将复选框中对应的元素进行选中
            var likeArray = ["sport","write"];
            for(var i=0;i<likeArray.length;i++){
                $(":checkbox[name='like'][value='"+ likeArray[i] +"']").prop("checked",true);
            }
            //将城市下拉框中的value为2的选中
            var cityId = "2";
            $("#city").val(cityId);
            //下拉框，复选框，单选框数据更新后，都需要调用render()，刷新渲染

            //Demo
            layui.use('form', function(){
                var form = layui.form;
                form.render();
            });

        });

        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#birthday' //指定元素
            });
        });

    </script>
</head>
<body>
    <div class="layui-container">
        <i class="layui-icon layui-icon-login-wechat" style="font-size: 30px; color: #02d700"></i>
        <i class="layui-icon layui-icon-login-qq" style="font-size: 30px; color: #1393ed"></i>
        <i class="layui-icon layui-icon-login-weibo" style="font-size: 30px; color: #fd0a1b"></i>
        <i class="layui-icon layui-icon-app" style="font-size: 30px; color: #FF00FF"></i>
        <h1>按钮</h1>
        <input type="button" value="提交" class="layui-btn layui-btn-warm">
        <a href="#" class="layui-btn layui-btn-warm">跳转</a>
        <a href="#" class="layui-btn layui-btn-normal">
            <i class="layui-icon layui-icon-add-circle-fine"></i>添加</a>
        表格：
        <table class="layui-table">
            <thead>
                <tr><th>姓名</th><th>性别</th><th>工资</th></tr>
            </thead>
            <tbody>
                <tr><td>张三</td><td>男</td><td>5500</td></tr>
                <tr><td>李四</td><td>男</td><td>7500</td></tr>
                <tr><td>王五</td><td>女</td><td>10500</td></tr>
                <tr><td>赵柳</td><td>女</td><td>8500</td></tr>
            </tbody>
        </table>
        <div id="cutPageDiv"></div>
        日期:<div id="birthday" class="layui-input" style="width: 100px;"></div>

        表单：
        <div class="layui-form">
            <form action="#">
                爱好：
                    <input type="checkbox" name="like" title="体育" value="sport">
                    <input type="checkbox" name="like" title="写作" value="write">
                    <input type="checkbox" name="like" title="阅读" value="read"><br>
                性别：<input type="radio" name="sex" value="男">男
                     <input type="radio" name="sex" value="女">女<br>
                姓名：
                     <input type="text" name="userName"><br>
                下拉框：
                    <select name="city" lay-verify="required" id="city">
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select><br>
                <input type="submit" value="提交" class="layui-btn">
            </form>
        </div>
    </div>
</body>
</html>